<template>
  <div class="message">
    <van-nav-bar title=" 服务通知" class="nav_bar" fixed>
      <template #right>
        <div class="nav_right">
          <van-image
            class="pic"
            :src="require('@/assets/icon/common/clean.png')"
          />
          <van-badge v-if="count > 0" :content="count" max="99">
            <div class="nacv_text" @click="readAllMessage">清空未读</div>
          </van-badge>
          <div v-else class="nacv_text" @click="readAllMessage">清空未读</div>
        </div>
      </template>
    </van-nav-bar>
    <div class="main">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-badge
          v-for="(v, i) in list"
          :key="i"
          :dot="v.status == 0"
          color="#ee0a24"
        >
          <!-- <van-cell :title="item" /> -->
          <div class="message_item" @click="readOneMessage(v)">
            <div class="message_top">
              <div class="type">{{ v.title }}</div>
              <div class="time">{{ v.createTime }}</div>
            </div>
            <div class="message_text">{{ v.message }}</div>
          </div>
        </van-badge>
        <van-empty v-if="!loading && list.length == 0" description="暂无通知" />
      </van-list>
    </div>
  </div>
</template>

<script>
import api from "@/api/api";
export default {
  components: {},
  props: {},
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      pageInfo: {
        pageNum: 1,
        pageSize: 20,
      },
    };
  },
  watch: {},
  computed: {
    count() {
      return this.list.filter((item) => item.status == 0).length;
    },
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onLoad() {
      //  this.pageInfo
      this.getSystemMessage();
    },
    async getSystemMessage() {
      let res = await api.systemLog(this.pageInfo);
      this.list = [...this.list, ...res.data];
      this.list.sort((a, b) => {
        if (a.status == 0 && b.status == 0) return -1;
        if (a.status != 0 && b.status == 0) return 1;
        return new Date(b.createTime) - new Date(a.createTime);
      });
      if (res.data.length < this.pageInfo.pageSize) {
        this.finished = true;
      }
    },
    async readOneMessage(v) {
      await api.readOneSystemMessage({ id: v.id });
      for (let i = 0; i < this.list.length; i++) {
        if (v.id == this.list[i].id) {
          this.list[i].status = 1;
        }
      }
    },
    async readAllMessage() {
      await api.readSystemMessage();
      for (let i = 0; i < this.list.length; i++) {
        this.list[i].status = 1;
      }
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
.message {
  height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/4431a33cd62f4efc9fc53a7606eee382.png")
    no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  box-sizing: border-box;
  padding: 200px 50px 150px 50px;
  .nav_bar {
    /deep/ .van-icon {
      font-size: 50px;
      font-weight: bold;
      color: #333333;
    }
    .nav_right {
      display: flex;
      align-items: center;
      .pic {
        width: 43px;
        height: 49px;
        margin-right: 10px;
      }
      .nacv_text {
        font-size: 36px;
        color: #3c3c3c;
      }
    }
  }
  .main {
    padding: 30px 15px 0 15px;
    /deep/ .van-badge__wrapper {
      width: 100%;
    }
    .message_item {
      padding: 70px 50px;
      background: #fff;
      border-radius: 20px;
      margin-bottom: 30px;
      .message_top {
        display: flex;
        justify-content: space-between;
        .type {
          font-size: 50px;
          color: #303030;
        }
        .time {
          font-size: 40px;
          color: #888888;
        }
      }
      .message_text {
        font-size: 40px;
        color: #888888;
        margin-top: 20px;
      }
    }
  }
}
</style>
